<template>
	<view class="yyMod">
		<view class="zyTypeList">
			<view class="typeItem"
				:class="[index == typeIndex ? 'active' : '']"
				v-for="(item,index) in zxTypeArr"
				:key="index"
				@tap="selectYyType(index,item.id)"
			>
				<!-- <text class="iconfont" :class="[item.iconName]"></text> -->
				<image class="zxTypeImg" :src="getStaticFilePath(item.iconName)"></image>
				<text>{{item.name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			zxTypeArr:Array,
			typeIndex:Number
		},
		data(){
			return{
			
			}
		},
		methods:{
			selectYyType(index,id){
				this.$emit('selectYyType',index,id);
			}
		}
	}
</script>

<style lang='scss' scoped>
	.zyTypeList{
		display: flex;
		margin-bottom: 10rpx;
	}
	.typeItem{
		flex: 1;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: $sq-main0;
		border: 1rpx solid #E1E0EB;
		.zxTypeImg{
			width: 50rpx;
			height: 50rpx;
			margin-right: 10rpx;
		}
		&.active{
			background: $sq-fue;
			border: 1rpx solid #D9D5F7;
		}
		&:nth-of-type(3n-1){
			margin: 0 20rpx;
		}
	}
</style>